<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2019/4/30
  Time: 10:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="../common.jsp"%>
<html>
<head>
    <title>用户列表</title>
</head>
<body>

<table id="userGrid" class="easyui-datagrid" title="角色列表" style="width:600px;height:250px" toolbar="#tb">
    <thead>
    <tr>
        <th field="userId" width="10" hidden="true">userId</th>
        <th field="userName" width="100">角色名称</th>
        <th field="userCode" width="100" align="right">角色代码</th>
        <th field="phone" width="100" align="right">电话</th>
        <th field="email" width="100" align="right">邮箱</th>
        <th field="address" width="200" align="right">地址</th>
        <th field="status" width="100" align="right">状态</th>
    </tr>
    </thead>
</table>
<div id="tb">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addUser()">新增</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">修改</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="delUser()">删除</a>
</div>
<div id="user_edit" class="easyui-dialog" title="添加用户" data-options="iconCls:'icon-save'" style="border: 0; width: 500px;">
    <form id="mainForm" method="post">
        <input name="roleId" type="hidden">
        <table cellpadding="5">
            <tr>
                <td>用户名称:</td>
                <td><input class="easyui-textbox" type="text" name="userName" data-options="required:true"></input></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input class="easyui-textbox" type="password" name="passWord" data-options="required:true"></input></td>
            </tr>
            <tr>
                <td>用户代码:</td>
                <td><input class="easyui-textbox" type="text" name="userCode" data-options="required:true"></input></td>
            </tr>
            <tr>
                <td>手机:</td>
                <td><input class="easyui-textbox" type="text" name="phone" data-options="required:true"></input></td>
            </tr>
            <tr>
                <td>邮箱:</td>
                <td><input class="easyui-textbox" type="text" name="email" data-options="required:true"></input></td>
            </tr>

            <tr>
                <td>地址:</td>
                <td><input class="easyui-textbox" type="text" name="address" data-options="required:true"></input></td>
            </tr>
            <tr>
                <td>角色选择:</td>
                <td>
                    <select id="cc" class="easyui-combobox" name="roleId" style="width:200px;">
                        <option value="">请选择</option>
                        <c:forEach var="model" items="${lists}">
                            <option value="${model.roleId}">${model.roleName}</option>
                        </c:forEach>
                    </select>
                </td>
            </tr>
            <tr>
                <td>状态:</td>
                <td>
                    <input class="easyui-radio" type="radio" name="status"  value="1"  checked="checked"/>启用
                    <input class="easyui-radio" type="radio" name="status" value="0"/>禁用
                </td>
            </tr>
        </table>
    </form>
    <div style="text-align: center; padding: 5px">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm('add')" id="addSub">添加提交</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm('update')" id="editSub">编辑提交</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="closeForm()">取消</a>
    </div>

</div>
<script type="application/javascript">
    $(function () {
        $('#user_edit').dialog('close');
        $("#userGrid").datagrid({
            url: ctx + "/user/getSysUserByPage",
            pagination: true,
            checkOnSelect: true,
            pageSize: 20,
            pageList: [20, 50, 100],
            singleSelect: true,
            rownumbers: true,
            onBeforeLoad: function (param) {
                $.messager.progress({
                    text: '数据加载中....'
                });
            },
            onLoadSuccess: function (data) {
                $.messager.progress('close');
            },
            onLoadError: function () {
                $.messager.progress('close');
            }
        });



    });

    function addUser() {
        $("#user_edit").dialog("open");
        $("#mainForm").form("clear");
        $("#addSub").show();
        $("#editSub").hide();
    }

    function editUser() {
        var row = $("#userGrid").datagrid("getSelected");
        if (row) {
            $('#user_edit').dialog('open');
            $('#addSub').hide();
            $('#editSub').show();
            // 加载到form表单中
            $('#mainForm').form('load', {
                userId: row.userId,
                userName: row.userName,
                userCode: row.userCode,
                status: row.status,
                roleId: row.roleId,
                phone: row.phone,
                address: row.address,
                email: roe.email
            });
        } else {
            $.messager.alert("操作提示", "请先选中一行！", "error");
        }
    }

    function delUser() {
        var row = $("#userGrid").datagrid("getSelected");
        if (row) {
            $.ajax({
                url: ctx + '/user/delUserById',
                dataType: "json",
                data: {
                    userId: row.userId
                },
                type: "GET",
                contentType: "application/json;charset=utf-8",
                success: function (data) {
                    if (data.status == true) {
                        // 重新加载
                        $('#userGrid').datagrid('reload');
                        $.messager.confirm("操作提示", data.respMsg, "info");
                    } else {
                        $.messager.alert("操作提示", data.respMsg, "error");
                    }
                },
                error: function () {
                    $.messager.alert("操作提示", "操作失败！", "error");
                }
            });
        } else {
            $.messager.alert("操作提示", "请先选中一行！", "error");
        }
    }

    function submitForm(data) {
        var url;
        if (data == "add") {
            url = ctx + "/user/addUser";
        } else {
            url = ctx + "/user/updateUser";
        }
        if ($('#mainForm').form('validate')) {
            var formJson = $('#mainForm').find('input').not('[value=""]').serializeJSON();
            $.ajax({
                url: url,
                dataType: "json",
                data: JSON.stringify(formJson),
                type: "POST",
                contentType: "application/json;charset=utf-8",
                success: function (data) {
                    if (data.status == true) {
                        $('#user_edit').dialog('close');
                        // 重新加载
                        $('#userGrid').datagrid('reload');
                        $.messager.alert("操作提示", data.respMsg, "info");
                    } else {
                        $.messager.alert("操作提示", data.respMsg, "error");
                    }
                },
                error: function () {
                    $.messager.alert("操作提示", "操作失败！", "error");
                }
            });
        } else {

        }
    }

    function closeForm() {
        $('#mainForm').form('clear');
        $('#userGrid').dialog('close');
    }
</script>
</body>
</html>
